.dropdown.body {
    padding: 8px;
    position: absolute;
    z-index: 250;
    background: var(--mobile-page-background);
    border-radius: 12px;
    border: var(--dropdown-border);
    min-width: 160px;
    min-height: 32px;
    box-sizing: border-box;
    box-shadow: var(--dropdown-shadow);
}
.dropdown.body.m-context-menu {
    z-index: 1150;
}
.rtl .dropdown.body {
    direction: rtl;
}
.dropdown.body.light {
    padding: 4px 6px;
    line-height: 0;
}
.dropdown.body.dark {
    box-shadow: none;
    background: var(--surface-main-inverted);
    border-radius: 8px;
}
.dropdown.body.black {
    background-color: #000;
    min-width: 174px;
}
.dropdown.info-txt {
    padding: 2px 0 6px 5px;
    font: var(--text-body1-bold);
    color: var(--text-color-medium)
}
.dropdown.body.context {
    min-width: 188px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
.rtl .dropdown.body.context {
    direction: rtl;
}
.rtl .dropdown.body.context .icon-arrow-right-after::after {
    transform: scaleX(-1);
}
.dropdown.body.submenu {
    -webkit-transition: all 200ms ease-in-out, right 200ms ease-in-out;
    transition: all 200ms ease-in-out, right 200ms ease-in-out;
    left: 100%;
    right: auto;
    min-width: 202px;
    max-width: 240px;
    margin: -8px -4px 0 -4px;
    visibility: hidden;
    opacity: 0;
}
.rtl .dropdown.body.submenu {
    right: 100%;
    left: auto;
}
.fr .dropdown.body.submenu {
    min-width: 252px;
    max-width: 290px;
}
.dropdown.body.submenu.active {
    visibility: visible;
    opacity: 1;
}
.disabled-submenu + .dropdown.body.submenu {
    display: none;
    visibility: hidden;
}
.dropdown.body.submenu.active {
    display: block;
    opacity: 1;
}
#bodyel .context .dropdown.body.submenu.active {
    display: block;
}
.dropdown.body hr {
    background: var(--divider-color);
    margin: 8px -8px;
    padding: 0;
    border: 0;
    height: 1px;
    position: relative;
}
.dropdown.body hr::before {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    height: 1px;
    background: var(--divider-color);
}
.dropdown.body.popup {
    width: 402px;
    padding: 24px;
}
.mega-dialog.dropdown.body {
    width: 560px;
    z-index: 1200;
}
.dropdown.body.white-context-menu {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}
.dropdown.body.wide-dropdown {
    width: 240px;
}

.dropdown.body.retention-history-menu {
    width: 162px;
}

.dropdown.body .retention-history-menu__list {
    z-index: 300;
}

.dropdown.body .retention-history-menu__list > .retention-history-menu__list__elem {
    justify-content: space-between;
}

.dropdown.body .retention-history-menu__list > .retention-history-menu__list__elem i {
    --icon-size: 24px;
    --mask-color: var(--secondary-green);
    margin-inline-end: 0;
}

.dropdown.body .dropdown-item {
    position: relative;
    width: auto;
    z-index: 10;
}
.mega-lite-mode .dropdown.body .dropdown-item[megatype="size"] {
    display: none;
}
/* Temporarily hide Versioning and Favourite options until we have a fix for MEGA Lite mode */
.mega-lite-mode .dropdown.body .dropdown-item[megatype="versions"],
.mega-lite-mode .dropdown.body .dropdown-item.properties-versions,
.mega-lite-mode .dropdown.body .dropdown-item.clearprevious-versions,
.mega-lite-mode .dropdown.body .dropdown-item.add-star-item {
    display: none;
}
/* Temporarily hide Move item in context menu for files & folders which is nor working in MEGA Lite mode */
.mega-lite-mode .dropdown.body .dropdown-item.move-item {
    display: none;
}
.dropdown.body span.loading {
    line-height: 32px;
}
.dropdown-white-arrow {
    display: none;
    width: 12px;
    height: 12px;
    position: absolute;
    background: var(--arrow-color, var(--surface-main));
    border-bottom: 1px solid var(--stroke-grey-2);
    border-right: 1px solid  var(--stroke-grey-2);
    left: calc(50% - 6px);
    z-index: 123;
    transform: rotateZ(-135deg);
    top: -7px;
    transition: var(--transition-bg-color);
}
.dropdown-inverted-arrow {
    width: 12px;
    height: 12px;
    position: absolute;
    background: var(--surface-main-inverted);
    border-bottom: 1px solid var(--stroke-grey-2-inverted);
    border-right: 1px solid  var(--stroke-grey-2-inverted);
    left: calc(50% - 6px);
    z-index: 123;
    transform: rotateZ(-135deg);
    top: -6px;
}
.dropdown-dark-arrow {
    display: none;
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid var(--arrow-color, #333);
    z-index: 123;
}
.dropdown.dropdown-arrow:not(.dialog):not(.mega-dialog) .dropdown-white-arrow,
.dropdown.dropdown-arrow .dropdown-dark-arrow {
    display: block;
}
.down-arrow .dropdown-white-arrow {
    top: auto;
    bottom: -7px;
    transform: rotateZ(45deg);
}
.dropdown.body.popup.astropay-payment-reminder {
    width: auto;
    width: max-content;
    max-width: 480px;
}
.dropdown.body.popup.non-activated-account {
    width: 456px;
}
.left-arrow .dropdown-white-arrow {
    top: 50%;
    left: -7px;
    margin: -12px 0 0 0;
    transform: rotate(135deg);
}
.right-arrow .dropdown-white-arrow {
    top: 50%;
    left: auto;
    right: -7px;
    margin: -12px 0 0 0;
    transform: rotate(-45deg);
}
.left-pos-arrow .dropdown-white-arrow {
    left: 8px;
    right: auto;
    margin: 0;
}
.right-pos-arrow .dropdown-white-arrow {
    left: auto;
    right: 8px;
    margin: 0;
}
.top-pos-arrow .dropdown-white-arrow {
    top: 8px;
    bottom: auto;
    margin: 0;
}
.high-top-pos-arrow .dropdown-white-arrow {
    top: 3px;
    bottom: auto;
    margin: 0;
}
.bottom-pos-arrow .dropdown-white-arrow {
    top: auto;
    bottom: 8px;
    margin: 0;
}
.dropdown-item {
    --mask-color: var(--icon-rest);
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text-color-medium);
    cursor: pointer;
    display: flex;
    height: 32px;
    font: var(--text-body1);
    padding: 0 8px;
    overflow: hidden;
    max-width: 100%;
    position: relative;
    text-overflow: ellipsis;
    text-align: initial;
    transition: var(--transition-color), var(--transition-bg-color);
    white-space: nowrap;
}
.dropdown-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-item.static {
    cursor: default;
}
.dark .dropdown-item {
    --mask-color: var(--text-color-medium-inverted);
    color: var(--text-color-medium-inverted);
}
.black .dropdown-item {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
}
.dropdown-item:not(.static):hover,
.dropdown-item.opened {
    --mask-color: var(--icon-active);
    color: var(--text-color-high);
    background: var(--button-hover);
}
.context .dropdown-item:not(.static):hover,
.context .dropdown-item.opened {
    width: auto;
}
.txt-hovers .dropdown-item:not(.static):hover,
.dropdown-item.active {
    --mask-color: var(--icon-active);
    background-color: transparent;
    color: var(--text-color-high);
}
.dark .dropdown-item:not(.static):hover,
.dark .dropdown-item.active {
    --mask-color: var(--text-color-white-high);
    color: var(--text-color-white-high);
    background-color: transparent;
}
.dropdown-item.contains-submenu.icon-arrow-right-after:not(.disabled-submenu)::after {
    --mask-color: var(--icon-rest);
    height: 16px;
    margin-inline-start: 8px;
    transition: var(--transition-color);
    width: 16px;
}
.dropdown-item.contains-submenu.icon-arrow-right-after:hover::after,
.dropdown-item.contains-submenu.icon-arrow-right-after.opened::after {
   --mask-color: var(--icon-active);
}
.rtl .dropdown-item.contains-submenu.icon-arrow-right-before i.icon-arrow-right {
    transform: rotateY(180deg);
}
/*  Item with tick */
.dropdown-item.tick-item.active .status-text {
    margin-inline-end: 8px;
}
.dropdown-item.tick-item.active::after {
    content: '';
    background-image: url(../images/mega/top-login-sprite.png);
    background-repeat: no-repeat;
    background-position: -30px -1816px;
    height: 8px;
    right: 8px;
    margin: 0;
    position: absolute;
    top: 12px;
    width: 11px;
}
.rtl .dropdown-item.tick-item.active::after {
    left: 8px;
    right: auto;
}
.dropdown-item.tick-item.active:hover::before {
    background-position: -30px -1856px;
}
.dropdown-item.red {
    color: var(--secondary-red);
}
.dropdown-item.red i {
    --mask-color: var(--secondary-red);
}
.context .dropdown-item.red {
    --mask-color: var(--secondary-red);
}
.dropdown-item.red:not(.disabled):hover {
    --mask-color: var(--text-color-white-high);
    color: var(--text-color-white-high);
    background-color: var(--secondary-red);
}
.dropdown-item.red:not(.disabled):hover i {
    --mask-color: var(--secondary-white);
}
.dropdown-item i {
    --icon-size: 24px;
    margin-inline-end: 8px;
    transition: var(--transition-color);
}
.dropdown-item > span + i {
    margin: 0;
    margin-inline-start: 8px;
    --icon-size: 16px;
}
.dropdown-item > span + i.warning {
    --icon-size: 24px;
}
.context .dropdown.submenu {
    border-radius: 12px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

/* Dropdown beta tag */
.dropdown-item .beta {
    border: 1px solid var(--progress-bar-fill3);
    border-radius: 3px;
    padding: 2px 8px;
    font: var(--text-body2);
    color: var(--progress-bar-fill3);
    margin-inline-start: 24px;
}

/* Dropdown warning notification */
.dropdown-warning {
    --icon-size: 24px;
    color: var(--text-color-warning);
    display: flex;
    padding: 0 8px;
}
.dropdown-warning i {
    margin-inline-end: 8px;
}
.dropdown-warning span {
    min-width: 180px;
    padding: 2px 0;
}

/* Sorting dropdowns */

.dropdown-items-info {
    padding: 0 4px 6px 4px;
    font: var(--text-body1);
    color: var(--text-color-medium);
}
.dropdown-section.sort-by .dropdown-item,
.dropdown-section.sort-by .dropdown-item i {
    transition: none;
}
.link-button .dropdown.body:not(.popup) {
    margin: 2px 0 0 0;
    padding: 8px 0;
}
.link-button .dropdown.body .dropdown-item {
    border-radius: 0;
}
.link-button .dropdown.body .dropdown-item i {
    margin: 0 9px 1px 0;
}
.link-button .dropdown.body:not(.popup) .dropdown-white-arrow {
    margin-left: -107px;
}
.dropdown.body.notification {
    width: 282px;
    color: #666666;
    font-size: 13px;
    line-height: 18px;
    font-family: 'source_sans_proregular', Arial;
    padding: 17px 18px 15px 18px;
    text-align: center;
    bottom: 29px;
    left: 50%;
    margin: 0 0 0 -141px;
    display: none;
}
.message.text-block em:hover .dropdown.body.notification {
    display: block;
}
.dropdown.notification-text {
    font-size: 14px;
    line-height: 19px;
    color: #666666;
    white-space: nowrap;
    padding: 7px 15px 5px 12px;
}
.dropdown.notification-text i {
    margin: 0 8px 0 -1px;
}
.dark-direct-tooltip {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-color-high-inverted);
    padding: 8px 12px;
    background: var(--mobile-background-inverse);
    border-radius: 6px;
    white-space: nowrap;
    position: absolute;
    display: none;
}
.dark-direct-tooltip.mobile-theme-tip {
    padding: 6px 12px;
    background: var(--mobile-background-inverse);
    color: var(--mobile-text-inverse);
    font: var(--mobile-font-caption-large-regular);
}
.dark-direct-tooltip.inverted,
.dark-direct-tooltip.in-call {
    background: var(--surface-grey-1);
    color: var(--text-color-high);
}
.dark-direct-tooltip.simpletip-tooltip.in-call i {
    --mask-color: var(--stroke-grey-1);
}
.dark-direct-tooltip i.icon-tooltip-arrow {
    position: absolute;
    bottom: -6px;
    left: calc(50% - 12px);
    width: 24px;
    --icon-size: 24px;
    height: 14px;
}
.dropdown.body.tooltip {
    position: fixed;
    visibility: collapse;
    transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
    opacity: 0;
}
.dropdown.body.tooltip.small {
    position: fixed;
    font-size: 14px;
    line-height: 18px;
    color: #333333;
    text-align: center;
    padding: 12px 24px;
    border-radius: 6px;
    z-index: 1500;
}
.dropdown.body.tooltip.visible {
    visibility: visible;
    opacity: 1;
}
.dropdown.body.img-preview {
    padding: 4px;
    min-width: 0;
}
.img-preview .dropdown.img-wrapper {
    width: 120px;
    height: 120px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-image: linear-gradient(45deg, rgba(222,222,222,0.6) 25%, transparent 25%), linear-gradient(-45deg, rgba(222,222,222,0.6) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(222,222,222,0.6) 75%), linear-gradient(-45deg, transparent 75%, rgba(222,222,222,0.6) 75%);
    border-radius: 2px;
    overflow: hidden;
}
.dropdown.body.img-preview img {
    max-width: 100%;
    max-height: 100%;
}
.dropdown.contact-preview {
    min-width: 238px;
    max-width: 320px;
    position: fixed;
}
.dropdown.contact-preview .contacts-info.body {
    padding: 4px;
}
.dropdown.body.img-preview {
    padding: 4px;
    position: fixed;
}
.img-preview .dropdown.img-wrapper {
    width: 176px;
}
.dropdown.body.download.context {
    width: 188px;
}
.dropdown.body.submenu.download {
    width: 214px;
}
.dropdown.body.dropdown-arrow.wide-dropdown {
    margin-bottom: 16px;
}
.dropdown-item.active-tick::before {
    background-image: url(../images/mega/top-login-sprite.png);
    content: '';
    height: 14px;
    margin-inline-start: 8px;
    width: 14px;
}
.dropdown.text-block {
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    position: relative;
    margin: 0;
    padding: 11px 24px 24px 24px;
}
.dropdown.text-block span {
    color: #424242;
}
.dropdown.text-block a {
    color: #FF4D4A;
}
.context .dropdown-item {
    padding: 0 8px;
    line-height: 32px;
}
.context .dropdown-item.visible-col-select i.sprite-fm-mono.icon-add {
    opacity: 0;
}
.context .dropdown-item.visible-col-select:hover i.sprite-fm-mono.icon-add {
    opacity: 1;
}
.context .small-icon {
    margin: 6px 13px 1px 1px;
    float: left;
}
.dropdown.submenu.labels {
    white-space: nowrap;
    max-width: unset;
}
.dropdown-color-txt {
    font: var(--text-body1);
    color: var(--text-color-medium);
    display: block;
    margin: 8px;
}
.dark .dropdown-color-txt {
    color: #FFFFFF;
}
.dropdown-colour-item {
    width: 16px;
    height: 16px;
    margin: 6px 0 8px;
    margin-inline-end: 6px;
    margin-inline-start: 6px;
    display: inline-block;
    border-radius: 100%;
    background-color: #777;
    transition: var(--transition-bg-color);
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.dropdown-item + .dropdown-colour-item {
    margin-inline-start: 12px;
}
.labels.small .dropdown-colour-item {
    width: 14px;
    height: 14px;
}
.labels.no-tips .dropdown-colour-item {
    margin-bottom: 13px;
}
.dropdown-color-info {
    display: block;
    padding: 0 0 0 0;
    font: var(--text-body1);
    color: var(--text-color-low);
    font-style: italic;
    margin: 8px 0 6px 8px;
    transition: all 200ms ease-in-out, right 200ms ease-in-out;
    opacity: 0;
    word-wrap: break-word;
    max-width: 174px;
}
.dropdown-color-info.active {
    opacity: 1;
}
.context .dropdown-color-info {
    max-width: 200px;
}
.dropdown-colour-item::before,
.dropdown-colour-item::after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: absolute;
    -webkit-transition: all 200ms ease-in-out, right 200ms ease-in-out;
    transition: all 200ms ease-in-out, right 200ms ease-in-out;
}

.dropdown-colour-item.active:hover::after {
    opacity: 0.8;
}
.dropdown-colour-item.active::before {
    box-shadow: 0 0 0 2px var(--stroke-main);
}
.dropdown-colour-item.red-colour-label {
    background-color: var(--label-red);
}
.dropdown-colour-item.orange-colour-label {
    background-color: var(--label-orange);
}
.dropdown-colour-item.yellow-colour-label {
    background-color: var(--label-yellow);
}
.dropdown-colour-item.green-colour-label {
    background-color: var(--label-green);
}
.dropdown-colour-item.blue-colour-label {
    background-color: var(--label-blue);
}
.dropdown-colour-item.purple-colour-label {
    background-color: var(--label-purple);
}
.dropdown-colour-item.grey-colour-label {
    background-color: var(--label-grey);
}
/* hover over non active/selected label, show shadow around */
.dropdown-colour-item.red-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(255, 98, 92, 0.3);
}
.dropdown-colour-item.orange-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(249, 166, 70, 0.3);
}
.dropdown-colour-item.yellow-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(244, 206, 74, 0.3);
}
.dropdown-colour-item.green-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(109, 204, 80, 0.3);
}
.dropdown-colour-item.blue-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(74, 184, 243, 0.3);
}
.dropdown-colour-item.purple-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(208, 136, 225, 0.3);
}
.dropdown-colour-item.grey-colour-label:hover {
    box-shadow: 0 0 0 4px rgba(164, 164, 167, 0.3);
}
/* sprite for active/selected label */
.dropdown-colour-item.red-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-red);
}
.dropdown-colour-item.orange-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-orange);
}
.dropdown-colour-item.yellow-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-yellow);
}
.dropdown-colour-item.green-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-green);
}
.dropdown-colour-item.blue-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-blue);
}
.dropdown-colour-item.purple-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-purple);
}
.dropdown-colour-item.grey-colour-label.active {
    box-shadow: 0 0 0 4px var(--label-grey);
}
.labels.disabled .dropdown-colour-item {
    box-shadow: none;
    cursor: inherit;
}
/* Tips and Hints */
.dropdown.body.hint {
    padding: 0;
    width: 542px;
    border-radius: 3px;
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
}
.dropdown.body.hint:not(.white-context-menu):not(.mega-dialog)::before {
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
}
.hint .dropdown-white-arrow {
    background-position: 0 -2314px;
}
.hint.down-arrow .dropdown-white-arrow {
    background-position: -24px -2321px;
}
.hint.left-arrow .dropdown-white-arrow {
    background-position: -8px -2349px;
}
.hint.right-arrow .dropdown-white-arrow {
    background-position: -29px -2349px;
}
.hint .dropdown.content-block {
    padding: 24px;
}
.dropdown.hint-thumb {
    width: 180px;
    height: 180px;
    float: left;
    background-image: url(../images/mega/hints-sprite.png);
    background-position: 0 0;
    background-repeat: no-repeat;
}
.es .dropdown.hint-thumb {
    background-image: url(../images/mega/hints-sprite-es.png);
}
.br .dropdown.hint-thumb {
    background-image: url(../images/mega/hints-sprite-pt.png);
}
.cn .dropdown.hint-thumb {
    background-image: url(../images/mega/hints-sprite-cn.png);
}
.dropdown.hint-thumb.upload {
    height: 198px;
    margin-bottom: -18px;
    background-position: -420px -210px;
}
.dropdown.hint-thumb.add-contacts {
    background-position: 0 -420px;
}
.dropdown.hint-thumb.chat {
    background-position: -210px -210px;
}
.dropdown.hint-thumb.manage-transfers {
    background-position: 0 -210px;
}
.dropdown.hint-thumb.share-content {
    background-position: 0 0;
}
.dropdown.hint-thumb.share-folders {
    background-position: -210px 0;
}
.dropdown.hint-thumb.rubbish-bin {
    background-position: -420px 0;
}
.dropdown.hint-thumb.left-click {
    background-position: 0px -631px;
    width: 192px;
    height: 144px;
    margin: -11px 0 -11px -15px;
}
.dropdown.hint-thumb.right-click {
    background-position: -250px -631px;
    width: 192px;
    height: 144px;
    margin: -11px 0 -11px -15px;
}
.dropdown.hint-thumb.have-notifications {
    background-position: -195px -420px;
    width: 210px;
    margin-left: -15px;
}
.dropdown.hint-info-block {
    margin: 0 0 0 204px;
    min-height: 180px;
}
.dropdown.close-button {
    height:24px;
    width: 24px;
    position: absolute;
    right:10px;
    top: 10px;
    z-index: 10;
    background-image: url(../images/mega/top-login-sprite.png);
    background-position: 6px -1157px;
    background-repeat: no-repeat;
    cursor: pointer;
    -webkit-transition: opacity 100ms ease-in-out;
    transition: opacity 100ms ease-in-out;
    opacity: 0.53;
}
.dropdown.close-button:hover {
    opacity: 0.65;
}
.dropdown.hint-header {
    font-size: 18px;
    line-height: 24px;
    color: #FF333A;
    font-family: 'LatoWeb', 'source_sans_proregular', Arial;
}
.dropdown.hint-info {
    font-size: 14px;
    line-height: 24px;
    color: #333333;
    padding: 8px 0 40px 0;
    font-family: 'LatoWeb', 'source_sans_proregular', Arial;
}
.dropdown.hint-info .bold {
    font-family: 'LatoWebBold', 'source_sans_prosemibold', Arial;
}
.dropdown.hint-info .red {
    color: #FF333A;
}
.dropdown.hint-info a {
    color: #FF333A;
    font-family: 'LatoWebBold', 'source_sans_prosemibold', Arial;
}
.dropdown.hint-bottom {
    position: absolute;
    display: table;
    width: 100%;
    bottom: 0;
    padding: 0 24px 24px 228px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.hint.short .dropdown.hint-bottom {
    display: none;
}
.hint.short .dropdown.hint-info-block {
    margin: 0;
    min-height: 0;
    padding: 0 0 0 27px;
    height: 120px;
    display: table-cell;
    vertical-align: middle;
}
.hint.short .dropdown.hint-info {
    padding: 8px 0 0 0;
}
.dropdown.hint-bottom .checkbox-block {
    display: table-cell;
    vertical-align: middle;
}
.hint-bottom .checkdiv.small {
    margin-top: 1px;
}
.hint-bottom button {
    min-width: auto;
    margin-top: 1px;
    display: table-cell;
}
.hint-bottom .radio-txt {
    padding-right: 6px;
    padding-top: 0;
    line-height: 16px;
    vertical-align: top;
}
/* end of Tips and Hints */

/* Contact dropdown */
.dropdown-contact-details, .dropdown-avatar .avatar {
    border-radius: inherit;
}
.dropdown-avatar {
    border-radius: inherit;
    cursor: pointer;
    position: relative;
    margin: -8px -9px 8px -9px;
}
.dropdown-avatar.rounded {
    border-radius: 8px;
}
.dropdown-avatar::before {
    content: '';
    display: block;
    position:absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
    transition: opacity 250ms ease-in-out;
}
.dropdown-avatar:hover::before {
    opacity: 0.1;
}
.dropdown-avatar .contact-name-loading {
    margin: 7px 0 0 0;
}
.dropdown-fingerprint {
    position: relative;
    padding: 11px 8px 6px 8px;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.1);
    margin: -8px -8px 9px -8px;
    background-position: 0 -3881px;
    background-repeat: repeat-x;
    height: 80px;
    box-sizing: border-box;
    background: var(--surface-grey-1);
}
.dropdown-item:not(.hidden) + .dropdown-fingerprint {
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    margin: 9px -8px 9px -8px;
}
.dropdown .contact-fingerprint-title {
    font: var(--text-body1);
    line-height: 18px;
    height: auto;
    padding-bottom: 6px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: var(--text-body1);
    color: var(--text-color-medium);
}
.dropdown .contact-fingerprint-title span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-width: 180px;
    vertical-align: top;
}
.dropdown .dropdown-verify {
    display: none;
}
.dropdown .dropdown-verify.active {
    position: absolute;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font: var(--text-body1);
    line-height: 20px;
    color: var(--text-color-medium);
    box-sizing: border-box;
    background-color: var(--stroke-grey-3);
    transition: opacity 250ms ease-in-out;
    opacity: 0;
    cursor: pointer;
}
.dropdown .dropdown-verify:hover {
    opacity: 1;
}
.dropdown .dropdown-verify i {
    --icon-size: 24px;
    --mask-color: var(--icon-rest);
    margin: 0 0 0 10px;
}
.dropdown .dropdown-verify span {
    padding-left: 10px;
}
.contact-fingerprint-title .user-card-verified, .verified .contact-fingerprint-title .verified_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    margin: 1px 0 0 10px;
    float: none;
    position: relative;
    top: auto;
    right: auto;
}
.dropdown .contact-fingerprint-txt span {
    width: 44px;
}
.dropdown-user-name {
    font-size: 0;
    line-height: 0;
    color: white;
    position: absolute;
    left: 0;
    bottom: 8px;
    padding:  0 18px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -moz-text-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
    -webkit-text-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
    text-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
    z-index: 10;
    cursor: pointer;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}
.dropdown-user-name .name {
    overflow: hidden;
    display: inline-block;
    position: relative;
    max-width: 100%;
    padding-right: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: var(--text-h3);
    box-sizing: border-box;
}
.dropdown-user-name .email {
    display: block;
    font-size: 14px;
    line-height: 17px;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dropdown-contact-details:hover .dropdown-user-name {
    opacity: 0;
}
.dropdown .nw-contact-status, .user-card-presence.small {
    box-shadow: 0 0 0 2px #FFFFFF;
    position: absolute;
    left: auto;
    right: 6px;
    width: 8px;
    height: 8px;
    top: 8px;
    margin: 0;
    z-index: 10;
}

.dropdown.reactions-dropdown .dropdown-white-arrow {
    display: none !important;
}
.dropdown.body.up-arrow {
    margin-top: -20px;
}


/*
 * Gif Panel
 * ------------------------------------------------------------------------------------------------------------------ */

.gif-panel-wrapper {
    position: absolute;
    bottom: 100%;
    width: 100%;
}

.gif-panel {
    position: relative;
    height: 550px;
    bottom: 100%;
    margin: 0 18px 5px 18px;
    padding: 0;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.15);
    border-radius: 5px;
    background: var(--surface-grey-1);
    z-index: 100;
}

.gif-panel:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    border-radius: inherit;
}

.dropdown.body.gif-panel-overlay {
    width: 630px;
    height: 550px;
}

/*
 * Gif Panel: Header -- Search
 * ------------------------------------------------------------------------------------------------------------------ */

.gif-panel .gif-panel-header {
    height: 31px;
    padding: 8px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--surface-grey-2);
}

.gif-panel .gif-panel-header + .ps {
    max-height: calc(100% - 47px);
}

.gif-panel .gif-panel-header .gif-panel-search {
    overflow: hidden;
    position: relative;
}

.gif-panel .gif-panel-header .gif-panel-search .gif-search-field {
    position: relative;
    overflow: hidden;
    width: -webkit-calc(100% - 168px);
    width: -moz-calc(100% - 168px);
    width: calc(100% - 168px);
    float: left;
}

.gif-panel .gif-panel-header .gif-panel-search .gif-search-field i {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    --icon-size: 24px;
    --mask-color: var(--icon-inactive);
    cursor: pointer;
}

.gif-panel .gif-panel-header .gif-panel-search .gif-search-field i.icon-close-component {
    left: auto;
    right: 6px;
}

.gif-panel .gif-panel-header .gif-panel-search .gif-search-field input {
    float: left;
    width: 100%;
    height: 32px;
    padding: 0 35px;
    border: 0 none;
    border-radius: 18px;
    font: var(--text-body1);
    color: var(--text-color-high);
    background: var(--surface-grey-1);
    box-sizing: border-box;
}

.gif-panel .gif-panel-header .gif-panel-search .giphy-logo {
    overflow: hidden;
    float: right;
    margin: 1px 0 0 0;
    min-width: 160px;
    height: 30px;
    border-radius: 4px;
    background: var(--surface-black);
    text-transform: uppercase;
    color: var(--text-color-white-high);
    white-space: nowrap;
}

.gif-panel .gif-panel-header .gif-panel-search .giphy-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

/*
 * Gif Panel: Content & Results
 * ------------------------------------------------------------------------------------------------------------------ */

.gif-panel .gif-panel-content {
    overflow: hidden;
    height: calc(100% - 62px);
}

.gif-panel .gif-panel-results {
    column-count: 2;
    column-gap: 14px;
    padding: 14px;
}

@media screen and (min-width: 1200px) {
    .gif-panel .gif-panel-results {
        column-count: 3;
    }
}

@media screen and (min-width: 1366px) {
    .gif-panel .gif-panel-results {
        column-count: 4;
    }
}

@media screen and (min-width: 1536px) {
    .gif-panel .gif-panel-results {
        column-count: 5;
    }
}

@media screen and (min-width: 1920px) {
    .gif-panel .gif-panel-results {
        column-count: 7;
    }
}

@media screen and (min-width: 2200px) {
    .gif-panel .gif-panel-results {
        column-count: 8;
    }
}

@media screen and (min-width: 2560px) {
    .gif-panel .gif-panel-results {
        column-count: 10;
    }
}

@media screen and (min-width: 3440px) {
    .gif-panel .gif-panel-results {
        column-count: 12;
    }
}

@media screen and (min-width: 5120px) {
    .gif-panel .gif-panel-results {
        column-count: 18;
    }
}

body.in-call .gif-panel .gif-panel-results {
    column-count: 4;
}

.gif-panel .gif-panel-results .node-container {
    display: inline-block;
    width: 100%;
    margin: 0 0 7px;
}

.gif-panel .gif-panel-results .node-container.clickable { cursor: pointer; }
.gif-panel .gif-panel-results .node-container.clickable:hover .node { opacity: 0.7; }
.gif-panel .gif-panel-results .node-container.clickable:hover .node:after {
    border: 4px solid rgba(36, 159, 214, 1);
}

.gif-panel .gif-panel-results .node-container.clickable .node:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 6px;
    border: 0 solid rgba(36, 159, 214, 0.3);
    transition: border-color 200ms ease-in;
}

.gif-panel .gif-panel-results .node-container .node {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--stroke-mid-grey);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: opacity 200ms ease-in-out;
}

.gif-panel .gif-panel-results .node-container .node span {
    position: absolute;
    visibility: hidden;
}

.gif-panel .gif-panel-results .node-container .node img {
    display: block;
    border-radius: 6px;
}

.gif-panel .results-end {
    text-align: center;
    min-height: 60px;
    margin: 20px 0 30px 0;
}

.gif-panel .results-end strong {
    display: inline-block;
    padding: 0 0 0 10px;
}

.gif-panel .no-results-container {
    display: table;
    width: 100%;
    height: 100%;
}

.gif-panel .no-results-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 22px;
}
.gif-panel .no-results-content i {
    display: block;
    margin: 0 auto 30px auto;
}
.dropdown footer {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
}
.context .dropdown-item i.sort-arrow {
    --icon-size: 16px;
    opacity: 0;
}
.context .dropdown-item.selected i.sort-arrow,
.context .dropdown-item.active i.sort-arrow {
    opacity: 1;
}
.context-menu .set-sensitive {
    display: flex;
}
.context-menu .set-sensitive span {
    width: auto;
    flex-grow: 1;
}
